<template>
  <div class="page">
    <div class="card function-area">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="化学试剂文字显示">
          <el-switch
            v-model="form.reagent_qrcode_show_text"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="化学试剂尺寸设置" prop="reagent_qrcode_size">
          <el-select
            v-model="form.reagent_qrcode_size"
            placeholder="请选择二维码尺寸"
          >
            <el-option label="30mm" value="30"></el-option>
            <el-option label="50mm" value="50"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标准物质文字显示">
          <el-switch
            v-model="form.substance_qrcode_show_text"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="标准物质尺寸设置">
          <el-select
            v-model="form.substance_qrcode_size"
            placeholder="请选择二维码尺寸"
          >
            <el-option label="30mm" value="30"></el-option>
            <el-option label="50mm" value="50"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="器材文字显示">
          <el-switch
            v-model="form.equipment_qrcode_show_text"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="器材尺寸设置">
          <el-select
            v-model="form.equipment_qrcode_size"
            placeholder="请选择二维码尺寸"
          >
            <el-option label="30mm" value="30"></el-option>
            <el-option label="50mm" value="50"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过期提醒时间">
          <el-input-number
            size="small"
            v-model="form.hazardous_chemicals_expired_notify_advanced_time"
            :min="1"
            :precision="0"
          ></el-input-number>
          天
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存设置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import crudStorehousrConfig from "@/api/storehousrConfig";
import { getConfigInfo, editAll } from "@/api/storehousrConfig";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operationEdit";
import pagination from "@crud/Pagination";

const defaultForm = {
  id: null,
  reagent_qrcode_size: null,
  substance_qrcode_size: null,
  equipment_qrcode_size: null,
  reagent_qrcode_show_text: null,
  substance_qrcode_show_text: null,
  equipment_qrcode_show_text: null,
  hazardous_chemicals_expired_notify_advanced_time: null,
};
export default {
  name: "StorehousrConfig",
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: "配置值",
      url: "api/storehousrConfig/queryByKeys",
      idField: "id",
      sort: "id,desc",
      crudMethod: { ...crudStorehousrConfig },
      query: {
        key: "reagent_qrcode_show_text,reagent_qrcode_size,substance_qrcode_show_text,substance_qrcode_size,equipment_qrcode_show_text,equipment_qrcode_size,hazardous_chemicals_expired_notify_advanced_time",
      },
    });
  },
  data() {
    return {
      queryTypeOptions: [{ key: "key", display_name: "配置名称" }],
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    getInfo() {
      getConfigInfo()
        .then((res) => {
          this.form.reagent_qrcode_show_text = res.reagent_qrcode_show_text;
          this.form.equipment_qrcode_show_text = res.equipment_qrcode_show_text;
          this.form.substance_qrcode_show_text = res.substance_qrcode_show_text;
          this.form.reagent_qrcode_size = res.reagent_qrcode_size;
          this.form.substance_qrcode_size = res.substance_qrcode_size;
          this.form.equipment_qrcode_size = res.equipment_qrcode_size;
          this.form.hazardous_chemicals_expired_notify_advanced_time =
            res.hazardous_chemicals_expired_notify_advanced_time / 86400;
        })
        .catch((_) => {
          console.log(res);
        });
    },
    onSubmit() {
      editAll({
        reagent_qrcode_show_text: this.form.reagent_qrcode_show_text,
        equipment_qrcode_show_text: this.form.equipment_qrcode_show_text,
        substance_qrcode_show_text: this.form.substance_qrcode_show_text,
        reagent_qrcode_size: this.form.reagent_qrcode_size,
        substance_qrcode_size: this.form.substance_qrcode_size,
        equipment_qrcode_size: this.form.equipment_qrcode_size,
        hazardous_chemicals_expired_notify_advanced_time:
          this.form.hazardous_chemicals_expired_notify_advanced_time*86400,
      })
       .then((res) => {
          this.$message.success("保存成功");
        })
        .catch((_) => {
          console.log(res);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.page ::v-deep{
  padding-top: 50px;
  .card {
    padding: 15px;
    margin: 0 auto;
    width: 70%;
    box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 50px;
    min-height: 180px;
    border-radius: 6px;
  }
}
</style>
